<script setup>
import { ref, computed, watch } from "vue";
import { sourceLangType } from "./menu";
import { Message } from "@arco-design/web-vue";
import { getTranslateData } from "./api";
import { onMounted } from "vue";
import { onUnmounted } from "vue";
import { useCustomSettingsStore } from "@/stores/CustomSettings";
const customSettingsStore = useCustomSettingsStore();
import { useHasVisitedBeforeStore } from "@/stores/HasVisitedBefore";
// 确定用户是否到过这个页面
const hasVisitedBeforeStore = useHasVisitedBeforeStore();
const isFirst = computed({
  get: () => hasVisitedBeforeStore.appTranslate,
  set: (newValue) => (hasVisitedBeforeStore.appTranslate = newValue),
});

function debounce(func, wait) {
  let timeout;
  return function () {
    window.clearTimeout(timeout);
    timeout = window.setTimeout(func, wait);
    console.log("执行了");
  };
}
const backgroundImage = computed(
  () => customSettingsStore.customSettings["f-pomodoro-bgi"]
); // 背景图
const originText = ref("");
const targetText = ref("");
const sourceOptionData = ref({});
sourceOptionData.value = sourceLangType;
const Source = ref("en");
const Target = ref("zh");
const input = ref();

const handleSendRequest = async () => {
  const SourceText = originText.value.trim();
  if (!SourceText) {
    targetText.value = "";
    Message.info({
      content: "请输入需要翻译的文本",
    });
    return;
  }
  const data = {
    SourceText: originText.value,
    Source: Source.value,
    Target: Target.value,
    ProjectId: 0,
  };
  try {
    const res = await getTranslateData(data);
    targetText.value = res.TargetText;
    console.log(res);
  } catch (e) {
    console.log(e);
  }
};

const handleInputChange = debounce(handleSendRequest, 1000);

const handleKeyDown = (e) => {
  if (e.ctrlKey && e.key === "a") {
    window.electron.openTranslateWindow();
  }
};

const handleSwap = () => {
  const temp = originText.value;
  originText.value = targetText.value;
  targetText.value = temp;
  const temp2 = Source.value;
  Source.value = Target.value;
  Target.value = temp2;
};

watch(originText, debounce(handleSendRequest, 1000));

watch([Source, Target], () => {
  handleSendRequest();
});

onMounted(() => {
  input.value.focus();
  window.addEventListener("keydown", handleKeyDown);
  if (isFirst.value) {
    Message.info({
      content: "按Ctrl+A键添加小挂件😎",
    });
    isFirst.value = false;
  }
});

onUnmounted(() => {
  window.removeEventListener("keydown", handleKeyDown);
});
</script>

<template>
  <div
    class="container"
    :style="{ backgroundImage: `url(${backgroundImage})` }">
    <div class="translateBox">
      <div class="translateContainer">
        <IconSwap @click="handleSwap" />
        <div class="leftBox">
          <a-select v-model="Source" placeholder="Please select ...">
            <a-option
              v-for="(label, key) in sourceOptionData"
              :value="key"
              :label="label" />
          </a-select>
          <a-textarea
            ref="input"
            v-model="originText"
            placeholder="输入文本"
            :auto-size="{
              minRows: 1,
              maxRows: 3,
            }"
            allow-clear
            @input="handleInputChange" />
        </div>
        <div class="rightBox">
          <a-select v-model="Target" placeholder="Please select ...">
            <a-option
              v-for="(label, key) in sourceOptionData"
              :value="key"
              :label="label" />
          </a-select>
          <div v-if="targetText" style="max-height: 131px; overflow-y: scroll">
            {{ targetText }}
          </div>
          <div v-else style="color: #666">翻译</div>
        </div>
      </div>
      <!-- <a-button @click="handleSendRequest">翻译</a-button> -->
    </div>
  </div>
</template>

<style scoped>
.container {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  background-size: cover; /* 覆盖整个容器 */
  background-repeat: no-repeat; /* 不重复 */
  background-position: center center; /* 图像居中显示 */
}

.translateContainer {
  width: 100%;
  display: flex;
  border: 1px solid #e5e6eb;
  border-radius: 6px;
  position: relative;
  overflow: hidden;
}

:deep(.arco-icon-swap) {
  border: 1px solid #aaa;
  z-index: 10;
  font-size: 26px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  border-radius: 20%;
  background-color: #fff;
  cursor: pointer;
}

:deep(.arco-select) {
  width: 100%;
  border-radius: 20px;
  border: 1px solid #ccc;
  position: absolute;
  top: 10px;
  width: 80%;
  left: 50%;
  transform: translateX(-50%);
}
.leftBox,
.rightBox {
  flex: 1;
  position: relative;
  padding-top: 50px;
  background-color: #f7f7f7;
}

.leftBox {
  padding-right: 20px;
}

:deep(.arco-textarea) {
  font-size: 26px;
}

.rightBox {
  padding-left: 20px;
  font-size: 26px;
  background-color: #fff;
}
</style>
